{% extends "base.html" %}

{% block title %}编辑会议室{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h2>编辑会议室</h2>
            <button id="backBtn" class="btn btn-secondary">返回详情</button>
        </div>
        <div class="card-body">
            <form id="roomForm">
                <div class="mb-3">
                    <label for="name" class="form-label">会议室名称</label>
                    <input type="text" class="form-control" id="name" required>
                </div>
                <div class="mb-3">
                    <label for="capacity" class="form-label">容量（人数）</label>
                    <input type="number" class="form-control" id="capacity" min="1" required>
                </div>
                <div class="mb-3">
                    <label for="location" class="form-label">位置</label>
                    <input type="text" class="form-control" id="location" required>
                </div>
                <div class="mb-3">
                    <label for="facilities" class="form-label">设施</label>
                    <textarea class="form-control" id="facilities" rows="3"></textarea>
                </div>
                <div class="mb-3 form-check">
                    <input type="checkbox" class="form-check-input" id="isActive">
                    <label class="form-check-label" for="isActive">会议室可用</label>
                </div>
                <button type="submit" class="btn btn-primary">保存修改</button>
            </form>
        </div>
    </div>
</div>

<!-- Hidden input for room ID -->
<input type="hidden" id="roomId" value="{{ room_id }}">

<script>
    const roomId = document.getElementById('roomId').value;

    // 加载会议室详情
    async function loadRoomDetails() {
        try {
            const response = await axios.get(`/api/rooms/${roomId}`);
            const room = response.data;
            
            // 填充表单
            document.getElementById('name').value = room.name;
            document.getElementById('capacity').value = room.capacity;
            document.getElementById('location').value = room.location;
            document.getElementById('facilities').value = room.facilities || '';
            document.getElementById('isActive').checked = room.is_active;
        } catch (error) {
            console.error('Error loading room details:', error);
            alert('加载会议室详情失败');
        }
    }

    // 更新会议室信息
    async function updateRoom(roomData) {
        try {
            const response = await axios.put(`/api/rooms/${roomId}`, roomData);
            if (response.status === 200) {
                alert('会议室信息更新成功');
                window.location.href = `/rooms/${roomId}`;
            }
        } catch (error) {
            console.error('Error updating room:', error);
            alert('更新会议室信息失败: ' + (error.response?.data?.detail || error.message));
        }
    }

    // 页面加载完成后执行
    document.addEventListener('DOMContentLoaded', function() {
        // 设置token
        const token = localStorage.getItem('token');
        if (token) {
            axios.defaults.headers.common['Authorization'] = 'Bearer ' + token;
        }
        
        // 加载数据
        loadRoomDetails();
        
        // 返回按钮事件
        document.getElementById('backBtn').addEventListener('click', () => {
            window.location.href = `/rooms/${roomId}`;
        });
        
        // 表单提交事件
        document.getElementById('roomForm').addEventListener('submit', (e) => {
            e.preventDefault();
            
            const roomData = {
                name: document.getElementById('name').value,
                capacity: parseInt(document.getElementById('capacity').value),
                location: document.getElementById('location').value,
                facilities: document.getElementById('facilities').value,
                is_active: document.getElementById('isActive').checked
            };
            
            updateRoom(roomData);
        });
    });
</script>
{% endblock %} 